import { useState, useCallback } from 'react'
import React from 'react'

// 加了memo后 props变化才会重新执行子组件
const Child = React.memo((props) => {
  console.log('子组件更新了')
  return (
    <div>
      <span>我是子组件</span>
    </div>
  )
})

export default function TextUseCallback() {
  const [count, setCount] = useState(0)
  const click = () => {
    setCount(count + 1)
  }
  // 每次count+1, childClick算新函数 导致props变化 重新执行子组件
  // const childClick = () => {}
  // 每次count+1, childClick算新函数 导致props变化 重新执行子组件
  // const childClick = useCallback(() => {})
  // 每次count+1, childClick不算新函数 不导致props变化 不重新执行子组件
  const childClick = useCallback(() => {}, [])
  // 每次count+1, childClick算新函数 导致props变化 重新执行子组件
  // const childClick = useCallback(() => {}, [count])
  return (
    <div className='item'>
      <span>count: {count}</span>
      <button onClick={click}>count+1</button>
      <Child childClick={childClick}></Child>
    </div>
  )
}

